<template>
  <div id="gou">
    <div class="box">
      <span @click="btn" v-if="show">编辑</span>
      <span v-else @click="btn1">完成</span>
      <span>购物车</span>
    </div>
    <div class="box0">
      <div class="box1">
        <div class="box2">
          <img src="../assets/imgs/4.png" alt="" />
        </div>
        <div class="box3">
          <p>猜你喜欢</p>
        </div>
        <div class="box4">
          <ul>
            <li v-for="item in list" :key="item.id" @click="xiang(item.id)">
              <img :src="item.pic" alt="" />
              <p class="q1">{{ item.name }}</p>
              <p>{{ item.name }}</p>
              <span class="w2">￥{{item.minPrice}}</span>
              <span class="w1">已售{{item.numberOrders}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/imgs/4.png";
import { getgouwu } from "../utils/api";
export default {
  name: "",
  data() {
    return {
      show: true,
      list: [],
      page: parseInt(Math.random() * 6 + 1),
      pageSize: 4,
    };
  },
  created() {
    let obj = {
      page: this.page,
      pageSize: this.pageSize,
    };

    getgouwu(obj).then((res) => {
    
      this.list =res
    });
  },
  methods: {
    // 点击进入详情页
    xiang(id){
     this.$router.push({
       path:'/xiang',
       query:{
         id
       }
     })
    },


    btn1() {
      this.show = true;
    },
    btn(i) {
      this.show = false;
    },
  },
};
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-around;
  span:nth-child(1) {
    width: 30%;
    margin-left: 10px;
    color: red;
  }
  span:nth-child(2) {
    width: 65%;
    margin-left: 80px;
  }
}
.box0 {
  width: 100%;
  height: 600px;
  overflow-y: auto;
  .box1 {
    width: 100%;
    height: 155%;

    .box2 {
      width: 100%;
      height: 300px;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .box3 {
      width: 100%;
      height: 50px;
      // background-color: red;

      line-height: 50px;
      text-align: center;
    }
    .box4 {
      width: 100%;
      ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          width: 48%;
          height: 270px;
          // background-color: yellow;
          img {
            width: 100%;
            height: 180px;
          }
          .q1 {
            height: 30px;
            background-color: #F0EDD4;
             line-height: 30px;
          
          }
          p {
             width: 100%;
            font-size: 14px;
              white-space: nowrap;
            overflow: hidden;
              margin-bottom: 10px;
            text-overflow: ellipsis;
          }
          span{
            margin-top:5px;
            margin-right: 10px;
            font-size: 14px;
            margin-left: 10px;
            margin-top: 5px;
          }
          .w1{
            display: inline-block;
            margin-left: 60px;
          }
          .w2{
            color: red;
          }
        }
      }
    }
  }
}
</style>